{% extends "smartwebnote/app_base.html" %}

{% block extra_include %}
<!-- BEGIN: YUI library -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/paginator/assets/skins/sam/paginator.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/paginator/paginator-min.js"></script>
<!-- END: YUI library -->
{% endblock %}

{% block title %}Notes{% endblock %}

{% block extra_content %}
<h1>Welcome to Smart Web Note
<img src="http://code.google.com/appengine/images/appengine-noborder-120x30.gif"
alt="Powered by Google App Engine" />
</h1>

Free feel to <a href ="/create">Create a test note</a> below.
You can <a href ="/list">sign in</a> through Google to create your own notes. The application is absolutely free and securely hosted by Google. Having fun to create notes for your class, your meetings, your TODO list, your travel, your wedding plan, your novel, your kids or your dog. Get a cool idea, request a new feature, report a bug, just post us a comment. </p><p/>
<p/>

<div id="main_content" style="width:100%;float:left;">

<div id="myMarkedUpContainer" style="float:left" >
    <table id="myTable">
        <thead>
            <tr>
                <th>Delete</th>
                <th>Note</th>
                <th>Last Updated</th>
                <th>Created</th>
            </tr>
        </thead>
    <tbody>
    {% for note in object_list %}
    <tr  valign="top">
    <td>
        <a href="">Delete</a>
    </td>
    <td>
        <a href="/edit/{{ note.key }}">{{ note.title }}</a>
    </td>
    <td>
        {{ note.last_updated|timesince }}
    </td>
    <td>
        {{ note.created|timesince }}
    </td>
    </tr>

    {% endfor %}
    </tbody>
    </table>
</div>


<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1238143397058" style="width:282px;border:1px solid #cccccc;float:right;margin-top:35px;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
skin['POSTS_PER_PAGE'] = '10';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
 { id: 'div-1238143397058',
   site: '17714401249059249766',
   'view-params':{"disableMinMax":"true","scope":"PAGE","features":"video,comment","startMaximized":"true"}
 },
  skin);
</script>


<script type="text/javascript">
	var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("myTable"));
	myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
	myDataSource.responseSchema = {
		fields: [{key:"Delete"},
				{key:"Note"},
				{key:"Last Updated"},
				{key:"Created"}
		]
	};

	var myColumnDefs = [
		{key:"Delete" , label:"", resizeable:true},
		{key:"Note", resizeable:true},
		{key:"Last Updated", sortable:true, resizeable:true},
		{key:"Created", sortable:true, resizeable:true}
	];

        var oConfigs = {
				paginator: new YAHOO.widget.Paginator({
					rowsPerPage: 50,
					template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
					rowsPerPageOptions: [10,25,50,100],
					pageLinks: 5

				}),
				initialRequest: "results=504"
		};

	var myDataTable = new YAHOO.widget.DataTable("myMarkedUpContainer", myColumnDefs, myDataSource, oConfigs,
		{caption: ""});
</script>
</div>

<div id="footer" style="width: 100%; float:left; border-top: dashed 1px #cccccc;bottom:0;left:0;margin: 10px 0px 20px 0px;text-align:center;color:#999999;">
	<p> Copyright &copy; 2009 SmartWebNote. All rights reserved.</p>

	<!-- AddThis Button BEGIN -->
	<script type="text/javascript">var addthis_pub="clearspecies";</script>
	<a href="http://www.addthis.com/bookmark.php?v=20" onclick="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
	<!-- AddThis Button END -->
</div>
{% endblock %}